<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue学习</title>
	<script src="js/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

</head>
<body>
<div id="app" >
  <button @click='deal()'>{{fullName}}</button> 
</div>
</body>
</html>

<script> 

 new Vue({
  el: '#app',
  data:{
    firstName:'zhu',
    lastName:'junyi'
  },
  methods:{
    deal(){
      this.fullName = 'marry me'
    }
  },
        //计算选项
  computed:{
    fullName:{
      get(){
        return this.firstName +''+this.lastName;
      },
      set(str){
        let nameArr = str.split(' ');
        this.firstName = nameArr[0];
        this.lastName = nameArr[1];
      }
    }

  }

})
</script>